<template>
  <h2 class="title2">发包关系图</h2>

  <div class="treeBox" v-if="!isEmpty" ref="indexChart"  :style="{ width:'100%' , height: '478px' }">

  </div>
  <div class="treeBox pt116" v-else :style="{ width:'100%' , height: '478px' }">
    <Empty description="暂无发包关系图"></Empty>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted , ref} from 'vue';
import { getprjTreeApi  } from '/@/api/pro';
import { Empty } from 'ant-design-vue';
import * as echarts from 'echarts'
export default defineComponent({
  components: {
    Empty
  },
  setup() {
    const projectId = inject('projectId') as string;
    let indexChart= ref<any>(null);
    const isEmpty =ref<Boolean>(false)
    const getTree = ( ) => {
      let options = {
        name: '项目发包',
        children: []
      };
      getprjTreeApi({ projectId }).then(({ data, success }) => {
        if(success && data.length) {
          options.children = data;
          initEcharts(options);
        }else {
          isEmpty.value = true
        }
      })
    }



    const initData = (options) => {
      return {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [options],
            top: '2%',
            left: '8%',
            bottom: '2%',
            right: '20%',
            symbolSize: 8,
            //edgeShape: 'polyline',
            edgeForkPosition: '13%',
            initialTreeDepth: 3,
            lineStyle: {
              width: 2
            },
            label: {
              backgroundColor: '#fff',
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
    }


    const initEcharts =  async (data) =>{
      let barChart = echarts.init(indexChart.value);
      barChart.setOption(initData(data));
      window.onresize = function () {
        barChart.resize();
      };
    }


    const init = () => {
      getTree();
    }

    onMounted(init)

    return {
      getTree , indexChart ,isEmpty
    }
  },
})
</script>

<style lang="less" scoped>
.title2{
  padding: 35px 0 5px;
}

.treeBox{
  background: #FCFCFC;
  border: 1px solid #E8EAEE;
  opacity: 1;
}

</style>
